<template>
  <!-- <div style="background:#ECECEC; padding:30px"> --> 
  <el-card>
    <!-- 头部三个卡片 -->
    <div class="header">
      <el-card class="site">
          目前用户数<br>
          <p class="word1">30000人</p>
      </el-card>
      <el-card class="site">
          关注人数<br>
          <p class="word2">300000人</p>
      </el-card>
      <el-card class="site">
          竞价人数 <br>
          <p class="word3">1000人</p>
      </el-card>
    </div>
    <!-- 日历 -->
    <el-card class="can">
      <a-calendar>
        <ul slot="dateCellRender" slot-scope="value" class="events">
          <li v-for="item in getListData(value)" :key="item.content">
            <a-badge :status="item.type" :text="item.content" />
          </li>
        </ul>
        <template slot="monthCellRender" slot-scope="value">
          <div v-if="getMonthData(value)" class="notes-month">
            <section>{{ getMonthData(value) }}</section>
            <span>Backlog number</span>
          </div>
        </template>
      </a-calendar>
    </el-card>
  </el-card>
</template>
<script>
export default {
  methods: {
    getListData(value) {
      let listData
      switch (value.date()) {
        case 12:
          listData = [
            { type: 'warning', content: '有三十份简历未读' }
          ]
          break
        case 10:
          listData = [
            { type: 'warning', content: '董事会议' },
            { type: 'success', content: '已读十份简历' },
            { type: 'error', content: '还有二十份简历未读' },
          ]
          break
        case 15:
          listData = [
            { type: 'warning', content: '上午十点与客户对接' },
            {
              type: 'success',
              content: '公司团建',
            }
          ]
           case 31:
          listData = [
            { type: 'warning', content: '测试部门面试' },
            {
              type: 'success',
              content: '公司跨年狂欢',
            }
          ]
          break
        default:
      }
      return listData || []
    },

    getMonthData(value) {
      if (value.month() === 8) {
        return 1394
      }
    },
  },
}
</script>
<style scoped>
.header {
  display: flex;
  justify-content: center;
}
.word1 {
  font-family:'Yuanti SC';
  font-size: 30px;
  font-weight: bold;
  color: rgb(140, 70, 180);
  display: inline;
}
.word2 {
  font-family:'Yuanti SC';
  font-size: 30px;
  font-weight: bold;
  color: rgb(180, 145, 70);
  display: inline;
}
.word3 {
  font-family:'FZDaBiaoSong-B06S';
  font-size: 30px;
  font-weight: bold;
  color: rgb(70, 127, 180);
  display: inline;
}
.site {
  width: 200px;
  height: 100px;
  margin: 0px 70px 0px 70px;
}
.can {
  margin-top: 15px;
}
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}

.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}

/* 全局样式 */
html,body,#app{
    height: 100%;
    margin: 0;
    padding: 0;
}
.el-breadcrumb {
    padding-bottom: 15px;
    font-size: 13px;
}
.el-table {
    margin-top: 15px;
}
.el-pagination {
    margin-top: 15px;
}
.el-carousel {
    margin-top: 15px;
}

</style>